<template>
  <section class="list">
    <div class="list-inner">
      <client-only>
        <div class="photos">
          <div class="column" v-for="g in gridcount" :key="g">
            <div class="item" v-for="(ite,index) in photo_column[g-1]" :key="index"><ImageBox :ite="ite" :idx="index" @showimg="showimg"></ImageBox></div>
          </div>
      </div>      
      </client-only>
    </div>
  </section>
</template>

<script>
import ImageBox from "./ImageBox"
export default {
  name: "list",
  components:{ImageBox},
  props:['gridcount'],
  data() {
    return {
      defaultImg:'',
      photo_column:{},
      items:[],
      is_first_showbox: true,
      detailComp: null,
      pathname: '',
      show_detail:false,
      load_imginfo:true,      
    };
  },
  methods: {
    // 点赞图片
    likePicture(id) {
      if (window.sessionStorage.getItem("tuyibo_userid") != null) {
        var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
        this.$axios.post("/api/web/likePicture", {
          uid: data.userid,
          image_id: id
        }).then(res=>{
          if(res.data.code==-1){
            this.$message.info(res.data.msg);
            // this.picture.like_num=this.picture.like_num-1
          }else{
            this.$message.success(res.data.msg)
            // this.picture.like_num=this.picture.like_num+1
          }
        })
        .catch(err=>{
          console.log(err)
        })
      } else if( window.loginbox ){
          window.loginbox.show = true
        }
    },
    collect(id) {
      if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
        var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
        this.$axios.post("/api/web/collectPicture", {
            uid: data.userid,
            image_id: id
          }).then(res => {
            if (res.data.code == -1) {
              this.$message.info(res.data.msg);
              // this.picture.isCollect=false
              // this.picture.collect_num--
            } else {
              this.$message.success(res.data.msg);
              // this.picture.isCollect=true
              // this.picture.collect_num++
            }
            // this.load(this.bodyData);
          }).catch(err => {
            console.log(err);
          });
      } else if( window.loginbox ){
        window.loginbox.show = true
      }
    },
    clickToDetail(id) {
      this.$router.push(`/detail?id=${id}`);
    },
    showimg(item){
      this.$router.push(`/detail?id=${item.id}`);
    },
    getColumnsHeight(){
      let sumHeightArr = []
      let columns = this.$el.querySelectorAll('.column')
      Array.from(columns).forEach( (c, idx) => {
        let childs = Array.from(c.childNodes)
        let sumHeight = childs.reduce( (x,y) => y.offsetHeight + x, 0)
        sumHeightArr.push([sumHeight, idx])
      })
      return sumHeightArr
    },    
    load(items){
      //获取宽度
      let column = {}
      let sumHeightArr = this.getColumnsHeight()

      for( let n = 0; n<items.length;n++){
        let item = items[n]
        let k = (n%this.gridcount)
        if( sumHeightArr[k][0] > 0 ){
          //console.log(sumHeightArr[k][1], k)
          k = sumHeightArr[k][1]
        }
        if( column[k] == undefined ){
          column[k] = []
        }
        column[k].push(item)
      }
      this.photo_column = column
      this.$parent.flexinit = false
      this.items = items
    },    
    layout(w){
      if( this.gridcount <= 1 ) return;
      let loop = true
      let hh = this.getColumnsHeight().sort()
      let cc = 1

      while(loop && cc < 3){
        //最大的一列挪到最小的去
        let maxidx = hh.length-1
        if( hh[maxidx][0] - hh[0][0] < 300 ) {
          loop = false
          return
        }
        let maxh = hh[maxidx]
        let moveitem = this.photo_column[maxh[1]].splice(this.photo_column[maxh[1]].length-1, 1)[0]
        this.photo_column[ hh[0][1] ].push( moveitem )
        hh[maxidx][0] -= moveitem.height
        hh[0][0] += moveitem.height
        hh = hh.sort()
        cc++
      }
    },    
  }
};
</script>

<style lang="less">
// .list {
//   padding-top: 24px;
// }
.photos{
  display: flex;
  width: 100%;
  position: relative;
  padding: 20px 0 20px 20px;
  
  .column{
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 10px;
    .item {
      padding: 5px;
      margin-top:10px;
      .item-content {
        overflow: hidden;
        position: relative;
        z-index: 1;
        cursor: pointer;
        > a {
          display: block;
          >img{
            display:block;
            width:100%;
          }
          .lazy{
            background: #F1F1FA;
            width: 460px;
            min-height: 400px;
            display: block;
            margin: 10px auto;
            border: 0;
          }
        }
      }
      .add-to-basket {
        position: absolute;
        right: 15px;
        top: 15px;
        transition: all .2s;
        transform: scale(0);
      }
      &:hover{
        .add-to-basket {
          transform: scale(1);
        }
      }
    }
  }
}
</style>
